<template>
  <div class="login">
    <div class="login_box">
      <div class="box_right">
        <img class="photoSize" src="../assets/img/login.png" alt="" />
      </div>
      <div class="box_left">
        <div class="hi">HI~ 欢迎登录!</div>
        <div class="lanmu">蓝目数字用户中心</div>
        <div class="Logo">
          <img class="logo" src="../assets/img/logo.png" alt="" />
          <div class="nameLanmu">蓝目数字·BLUE EYE</div>
        </div>
        <!-- 登录表单 PC端-->
        <div class="loginPC">
          <el-form ref="loginFormRef" :model="loginForm" class="login_form">
            <!-- 用户名 -->
            <el-form-item label="手机号">
              <input class="input_num" v-model="loginForm.num" />
            </el-form-item>
            <el-divider></el-divider>
            <!-- 密码 -->
            <el-form-item label="密码">
              <input
                type="password"
                class="input_password"
                v-model="loginForm.password"
              />
            </el-form-item>
            <el-divider></el-divider>
            <!-- 按钮区域 -->
            <el-form-item>
              <div class="btns">
                <el-button
                  type="primary"
                  round
                  style="background:#2860EA"
                  @click="login"
                  ><span style="color:#FFFFFF">登录</span></el-button
                >
                <el-button
                  round
                  @click="register"
                  style="margin:1rem 0 0 0;border:1px solid #2860EA"
                  ><span style="color:#2860EA">立即注册</span></el-button
                >
                <el-button
                  type="text"
                  style="margin:1rem 0 0 0;color:#333333;"
                  @click="expLogin"
                  >游客登录</el-button
                >
              </div>
            </el-form-item>
          </el-form>
        </div>
        <!-- 登录表单移动端 -->
        <div class="loginYD">
          <div class="num">
            <el-input
              v-model="loginForm.num"
              placeholder="请输入账号"
            ></el-input>
          </div>
          <div class="password">
            <el-input
              placeholder="请输入密码"
              v-model="loginForm.password"
              show-password
            ></el-input>
          </div>
          <!-- 按钮区域 -->
          <div class="btns">
            <el-button
              type="primary"
              round
              style="background:#0086B5"
              @click="login"
              ><span style="color:#FFFFFF">登录</span></el-button
            >
            <el-button
              round
              @click="register"
              style="margin:10px 0 0 0;border:1px solid #0086B5"
              ><span style="color:#0086B5">立即注册</span></el-button
            >
            <el-button
              type="text"
              style="margin:1rem 0 0 0;color:#333333;"
              @click="expLogin"
              >游客登录</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  createSocket,
  socketsend1,
  socketsendpromotionlist,
  socketsendgetcontact,
  socketsendgetfollowings
} from '../assets/js/websocketTest.js'
import CryptoJS from 'crypto-js'
export default {
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        num: '',
        password: '',
        verification: '',
        Num: null,
        Password: null
      }
      // 这是表单的验证规则
    }
  },
  methods: {
    submitForm(formName) {
      // 保存的账号
      var name = this.loginForm.num
      // 保存的密码
      var pass = this.loginForm.password
      if (name === '' || name === null) {
        alert('请输入正确的用户名')
      } else if (pass === '' || pass === null) {
        alert('请输入正确的密码')
      }
      // 判断复选框是否被勾选 勾选则调用配置cookie方法
      this.setCookie(name, pass, 7)
    },
    LOGIN1() {
      this.$store.state.Num = this.loginForm.num
      this.$store.state.Password = this.loginForm.password
      this.$store.state.type = '1'
      console.log(this.$store.state.Num)
      console.log(this.$store.state.Password)
      // createSocket('ws://192.168.199.205:6060/test')
      createSocket('ws://47.99.175.180:6060/test')
      // createSocket('ws://192.168.199.128:6060/test')
    },
    LOGIN2() {
      setTimeout(() => {
        if (document.documentElement.clientWidth < 600) {
          this.$store.state.Num = this.loginForm.num
          this.$store.state.Password = this.loginForm.password
          this.$store.state.type = '1'
          if (this.$store.state.token === '-1') {
            alert('密码错误')
          } else if (this.$store.state.token === '-2') {
            alert('用户不存在')
          } else if (this.$store.state.token === '-3') {
            alert('账户被冻结')
          } else if (this.$store.state.token === '-4') {
            alert('登录失败请重试')
          } else {
            if (this.$store.state.judgeLoginStatus === 'lose') {
              alert('电脑端/云端程序未开启，请尝试启动后再打开网页监控')
            } else {
              this.$router.push({ path: '/mobliedata3' })
            }
          }
        } else {
          this.$store.state.Num = this.loginForm.num
          this.$store.state.Password = this.loginForm.password
          this.$store.state.type = '1'
          if (this.$store.state.token === '-1') {
            alert('密码错误')
          } else if (this.$store.state.token === '-2') {
            alert('用户不存在')
          } else if (this.$store.state.token === '-3') {
            alert('账户被冻结')
          } else if (this.$store.state.token === '-4') {
            alert('登录失败请重试')
          } else {
            if (this.$store.state.judgeLoginStatus === 'lose') {
              alert('电脑端/云端程序未开启，请尝试启动后再打开网页监控')
            } else {
              this.$router.push({ path: '/data3' })
              console.log(this.$store.state.token)
            }
          }
        }
      }, 1000)
    },
    async login() {
      this.submitForm()
      this.LOGIN1()
      await this.LOGIN2()
    },
    expLogin() {
      // createSocket('ws://112.124.67.119:6060/test')
      // createSocket('ws://192.168.199.205:6060/test')
      socketsend1()
      setTimeout(() => {
        this.$router.push({ path: '/youke' })
      }, 1000)
    },
    promotionlist() {
      socketsendpromotionlist()
    },
    getcontact() {
      socketsendgetcontact()
    },
    getfollowings() {
      socketsendgetfollowings()
    },
    // 加密函数
    Encrypt(a) {
      var cipherText = CryptoJS.AES.encrypt(a, 'secretkey123').toString()
      console.log(cipherText)
      return cipherText
    },
    // 解密函数
    Decrypt(b) {
      var bytes = CryptoJS.AES.decrypt(b, 'secretkey123')
      var originalText = bytes.toString(CryptoJS.enc.Utf8)
      console.log(originalText)
      return originalText
    },
    // 设置cookie
    setCookie(cName, cPwd, exdays) {
      var exdate = new Date() // 获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
      // 字符串拼接cookie
      window.document.cookie =
        'num' + '=' + cName + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie =
        'password' +
        '=' +
        this.Encrypt(cPwd) +
        ';path=/;expires=' +
        exdate.toGMTString()
    },
    // 读取cookie
    getCookie: function() {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') // 再次切割
          console.log(arr2)
          // 判断查找相对应的值
          if (arr2[0] === 'num') {
            this.loginForm.num = arr2[1]
            // var bytes1 = CryptoJS.AES.decrypt(arr2[1], 'secretkey123')
            // this.loginForm.num = bytes1.toString(CryptoJS.enc.Utf8) - 0 // 保存到保存数据的地方
          } else if (arr2[0] === 'password') {
            this.loginForm.password = this.Decrypt(arr2[1])
            // var bytes2 = CryptoJS.AES.decrypt(arr2[1], 'secretkey123')
            // this.password = bytes2.toString(CryptoJS.enc.Utf8)
          }
        }
      }
    },
    // 清除cookie
    clearCookie: function() {
      this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了
    },
    // 注册跳转
    register() {
      window.open('https://www.blueye.info/blueye2/xlq_signup.jsp', '_blank')
    }
  },
  // 页面加载获取cookie值
  mounted() {
    this.getCookie()
  }
}
</script>

<style Lang="less" scoped>
.logo {
  display: none;
}
.lanmu {
  display: none;
}
.loginYD {
  display: none;
}
.nameLanmu {
  display: none;
}
.login_box {
  width: 59.5rem;
  height: 35.875rem;
  background: #f3f3f3;
  box-shadow: -2px 0px 6px 0px rgba(127, 127, 127, 0.24);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: row-reverse;
}
.box_right {
  width: 28.0625rem;
  height: 35.875rem;
}
.photoSize {
  width: 28.0625rem;
  height: 35.875rem;
}
.hi {
  font-size: 1.6875rem;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #000000;
  line-height: 2.3125rem;
  margin-right: 12.875rem;
  margin-top: 5.75rem;
}
.btns {
  display: flex;
  flex-direction: column;
  width: 16.8125rem;
  height: auto;
}
.input_num,
.input_password,
.input_verification {
  background: transparent;
  border: none;
  outline: medium;
  width: 12rem;
}
.input_verification {
  width: 8rem;
}
.el-form-item {
  margin-top: 2.5625rem;
  margin-bottom: 0;
}
.el-divider {
  margin: 0;
  width: 16.6875rem;
  background: #9b9b9b;
}
@media screen and (max-width: 540px) {
  .loginYD {
    display: block;
  }
  .lanmu {
    display: block;
    font-size: 20px;
    margin-top: 30px;
    font-family: Source Han Serif SC;
    font-weight: bold;
    color: #333333;
  }
  .Logo {
    margin-top: 96px;
  }
  .logo {
    display: block;
    width: 41.5px;
    height: 41.5px;
    align-items: center;
    margin-left: 30px;
  }
  .nameLanmu {
    display: block;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #46484e;
    margin-top: 12px;
  }
  .hi {
    display: none;
  }
  .loginPC {
    display: none;
  }
  .box_right {
    display: none;
  }
  .login_box {
    width: 350px;
    height: 700px;
    box-shadow: none;
    background: #fff;
  }
  .box_left {
    width: 350px;
    height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .num {
    width: 286px;
    height: 31.5px;
    background: #f5f5f5;
    border-radius: 31px;
    margin-top: 76.5px;
  }
  .password {
    width: 286px;
    height: 31.5px;
    background: #f5f5f5;
    border-radius: 31px;
    margin-top: 17.5px;
  }
  .el-input /deep/ .el-input__inner {
    width: 286px;
    height: 31.5px;
    background: transparent;
    border: none;
  }
  .input_verification {
    width: 80px;
  }
  .el-form-item {
    margin-top: 70px;
    margin-bottom: 0;
  }
  .el-divider {
    margin: 0;
    width: 200px;
    background: #9b9b9b;
  }
  .btns {
    display: flex;
    flex-direction: column;
    margin-top: 102px;
    width: 286px;
    height: auto;
  }
}
</style>
